﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS3卡通太阳照射动画特效 - 站长素材</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>


    </style>

</head>
<body>

<div class="show">
    <div class="sun" id="sun">
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
    </div>
</div>

<!-- jquery
    ============================================ -->
<script src="../static/js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap JS
    ============================================ -->
<script src="../static/js/bootstrap.min.js"></script>
<!-- wow JS
    ============================================ -->
<script src="../static/js/wow.min.js"></script>
<!-- price-slider JS
    ============================================ -->
<script src="../static/js/jquery-price-slider.js"></script>
<!-- meanmenu JS
    ============================================ -->
<script src="../static/js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
    ============================================ -->
<script src="../static/js/owl.carousel.min.js"></script>
<!-- sticky JS
    ============================================ -->
<script src="../static/js/jquery.sticky.js"></script>
<!-- scrollUp JS
    ============================================ -->
<script src="../static/js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
    ============================================ -->
<script src="../static/js/counterup/jquery.counterup.min.js"></script>
<script src="../static/js/counterup/waypoints.min.js"></script>
<script src="../static/js/counterup/counterup-active.js"></script>
<!-- mCustomScrollbar JS
    ============================================ -->
<script src="../static/js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
    ============================================ -->
<script src="../static/js/metisMenu/metisMenu.min.js"></script>
<script src="../static/js/metisMenu/metisMenu-active.js"></script>
<!-- morrisjs JS
    ============================================ -->
<script src="../static/js/morrisjs/raphael-min.js"></script>
<script src="../static/js/morrisjs/morris.js"></script>
<script src="../static/js/morrisjs/morris-active.js"></script>
<!-- morrisjs JS
    ============================================ -->
<script src="../static/js/sparkline/jquery.sparkline.min.js"></script>
<script src="../static/js/sparkline/jquery.charts-sparkline.js"></script>
<script src="../static/js/sparkline/sparkline-active.js"></script>
<!-- calendar JS
    ============================================ -->
<script src="../static/js/calendar/moment.min.js"></script>
<script src="../static/js/calendar/fullcalendar.min.js"></script>
<script src="../static/js/calendar/fullcalendar-active.js"></script>
<!-- plugins JS
    ============================================ -->
<script src="../static/js/plugins.js"></script>
<!-- main JS
    ============================================ -->
<script src="../static/js/main.js"></script>
<!-- tawk chat JS
    ============================================ -->
<script src="../static/js/tawk-chat.js"></script>
<script>
    setInterval(handle, 1000);
    function handle() {
        $.get("/light/getLight",
            {},
            function (data, status) {
                var light=data;
                if (light > 0 && light <= 100) {
                    document.getElementById("sun").style.background = "#ffb3a7";

                } else if (light > 100 && light <= 200) {
                    document.getElementById("sun").style.background = "#f47983";

                } else if (light > 200 && light <= 300) {
                    document.getElementById("sun").style.background = "#f05654";

                } else if (light > 300 && light <= 400) {
                    document.getElementById("sun").style.background = "#db5a6b";

                } else if (light > 400 && light <= 500) {
                    document.getElementById("sun").style.background = "#c93756";

                } else if (light > 500 && light <= 600) {
                    document.getElementById("sun").style.background = "#c91f37";

                } else if (light > 600 && light <= 700) {
                    document.getElementById("sun").style.background = "#c3272b";

                } else if (light > 700 && light <= 800) {
                    document.getElementById("sun").style.background = "#9d2933";

                } else if (light > 800 && light <= 900) {
                    document.getElementById("sun").style.background = "#60281e";

                } else if (light > 900 && light <= 1000) {
                    document.getElementById("sun").style.background = "#622a1d";

                } else if (light > 1000) {
                    document.getElementById("sun").style.background = "#000000";

                }
                console.log(light);

            });
        $.get("/spl/getSpl",
            {},
            function (data, status) {
                var spl=data;
                if (spl > 0 && spl <= 20) {
                    document.getElementById("sun").style.transform = "scale(0.1)";
                } else if (spl > 20 && spl <= 23) {
                    document.getElementById("sun").style.transform = "scale(0.5)";
                } else if (spl > 23 && spl <= 26) {
                    document.getElementById("sun").style.transform = "scale(1)";
                } else if (spl > 26 && spl <= 29) {
                    document.getElementById("sun").style.transform = "scale(1.5)";
                } else if (spl > 29) {
                    document.getElementById("sun").style.transform = "scale(2)";
                }
                console.log(spl);


            });



    }


</script>

</body>
</html>